<template>
    <div v-if="showBtn" class="box-f1">
        <div v-if="state == 20" class="btn-list box ">
            <div @click="del()" class="btn-item del">
                删除
            </div>
            <!-- <div @click="modify()" class="btn-item modify">
                修改
            </div> -->
            <div @click="sendK2()" class="btn-item sendK2">
                发起K2
            </div>
        </div>
        <div v-if="state == 25" class="btn-list box">
            <div @click="trash()" class="btn-item trash">
                废弃
            </div>
            <div @click="sendK2()" class="btn-item sendK2">
                发起K2
            </div>
        </div>
        <div v-if="state == 60" class="btn-list box">
            <div @click="baoxiao()" class="btn-item sendK2">
                发起报销
            </div>
        </div>
        <div v-if="state == 145" class="btn-list box">
            <div  @click="trash()" class="btn-item trash">
                废弃
            </div>
        </div>
    </div>
</template>

<script>
import { getJMByBillNum, getBillConfig } from '../utils/getBillType.js';
import { mapState } from 'vuex';
import { MessageBox } from 'mint-ui';
import { formatDate } from '../utils/common.js';
/* eslint-disable */
export default {
    props: ['state', 'data', 'billNum'],
    data () {
        return {
            JM: ''
        };
    },
    mounted () {
        this.JM = getJMByBillNum(this.billNum);
        if (this.JM === 'CB201') {
            this.getExpenseUtils();
        }
        console.log('单据详情', this.data);
    },
    computed: {
        showBtn () {
            if (['FB', 'CS', 'CB201'].indexOf(this.JM) === -1) {
                return false
            }
            if (this.data) {
                // console.log(this.state, this.billNum);
                if ([20, 25, 145].indexOf(+this.state) > -1) {
                    return true;
                } else if (+this.state === 60 && this.JM === 'CS') {
                    return true;
                } else {
                    return false;
                }
            } else {
                return false;
            }
        },
        ...mapState(['userNum', 'userInfo'])
    },
    methods: {
        del () {
            MessageBox({
                message: '确定要删除吗',
                showCancelButton: true
            }).then(action => {
                if (action === 'confirm') {

                    var url = this.HOST + '?method=deleteBills&number=' + this.billNum + '&type=' + this.JM;

                    if (this.JM === 'CS' || this.JM === 'CB201') {
                        let type = this.JM
                        if (this.JM === 'CB201') type = 'CB'
                        url = this.HOST + '?method=deleteOrders&number=' + this.billNum + '&type=' + type;
                    }
                    this.$http.get(url).then(res => {
                        MessageBox({
                            message: '删除成功',
                            showCancelButton: false,
                            closeOnClickModal: false
                        }).then(action => {
                            history.go(-1);
                            // if (action === 'confirm') {

                            // }
                        });
                    });
                }
            });
        },
        baoxiao () {
            let bizAccountBill = {
                marchInfos: [],
                cause: this.data[0].cause
            }
            let item0 = this.data[0];
            let marchInfo = {
                amount: 0,
                cause: item0.cause,
                createtime: item0.startDate.substring(0, 10),
                endDate: item0.endDate.substring(0, 10),
                from: item0.fro,
                number: this.$route.query.billNum,
                startDate: item0.startDate.substring(0, 10),
                state: item0.state,
                to: item0.fto,
                countDateNum: 3,
                travelPersonShow: item0.travelPerson,
                checked: true,
                travelPerson: [],
                travelPersonnum: []
            }
            this.data.forEach(item => {
                marchInfo.amount += (+item.amount);
                marchInfo.travelPerson.push({
                    userName: item.travelPerson,
                    zsInvoice:{
                        num: 0,
                        money: 0,
                        list: []
                    }
                })
                marchInfo.travelPersonnum.push(item.travelNum)
            })
            bizAccountBill.marchInfos[0] = marchInfo;
            console.log(bizAccountBill);
            sessionStorage.setItem('bizAccountBill', JSON.stringify(bizAccountBill));
            // marchInfo.countDateNum =
            location.href = this.$store.state.cbUrl;
        },
        trash () {
            MessageBox({
                message: '您确定要废弃当前单据吗？',
                showCancelButton: true
            }).then(action => {
                if (action === 'confirm') {
                    let url = this.HOST + '?method=abandonNewBills&number=' + this.billNum + '&type=' + this.JM;
                    if (this.JM === 'CS' || this.JM === 'CB201') {
                        url = this.HOST + '?method=abandonBills&billNum=' + this.billNum;
                    }
                    this.$http.get(url).then(res => {
                        console.log('res', res);
                        if (res.data.code === 200) {
                            MessageBox({
                                message: '废弃成功',
                                showCancelButton: false,
                                closeOnClickModal: false
                            }).then(action => {
                                history.go(-1);
                                // if (action === 'confirm') {
                                // }
                            });
                        }
                    });
                }
            });
        },
        modify () {
            let billData = this.data;
            sessionStorage.setItem('modifyBillData', JSON.stringify(billData));
        },
        getExpenseUtils () {
            let url = this.HOST + '?method=getExpenseUtils&companyNum=' + this.userInfo.companyNum + '&from=evection';
            this.$http.get(url).then(res => {
                if (res.data.code === 200) {
                    // console.log('66666', this.data.t);
                    res.data.t.forEach(item => {
                        if (item.expenseTypeID === this.data.t.tinfo[0].FEXPENSETYPEID) {
                            this.data.t.tinfo[0].expenseTypeNumber = item.expenseTypeNumber;
                            this.data.t.tinfo[0].expenseTypeName = item.expenseTypeName;
                        }
                    });
                }
            });
        },
        sendK2 () {
            // console.log('单据详情', this.data);
            let billConfig = getBillConfig();
            let k2Data = {};
            k2Data.billNum = this.billNum;
            k2Data.BSID = billConfig[this.JM].BSID;
            if (this.JM === 'CS') {
                // 行程
                k2Data.ExpenseType = this.data[0].expenseNum;
                k2Data.BOID = this.data[0].evefid
                k2Data.sCapital = '0';
                k2Data.sProcessSubject = this.userInfo.userNum + '_' + this.data[0].expense + '_' + billConfig[this.JM]['title'];
                let now = new Date()
                let nowDate = formatDate(now, 'yyyy-MM-dd')
                let timeCope = formatDate(new Date(now.setMonth(now.getMonth() + 4)), 'yyyy-MM-dd')
                k2Data.bodysJson = this.xinCenBodysJson({
                    title: k2Data.sProcessSubject,
                    cause: this.data[0].expense,
                    billNum: this.billNum,
                    userName: this.userInfo.userName,
                    entrys: this.data,
                    companyName: this.data[0].companyName,
                    nowDate,
                    timeCope
                })
            } else if (this.JM === 'CB201') {
                // 差报
                let tinfo = this.data.t.tinfo[0];
                k2Data.BOID = tinfo.FBILLID
                k2Data.ExpenseType = tinfo.expenseTypeNumber;
                // 计算单据金额
                let sCapital = 0;
                this.data.t.tbank.forEach(item => {
                    sCapital += (+item.FAMOUNT);
                });
                k2Data.sCapital = sCapital;
                k2Data.sProcessSubject = this.userInfo.userNum + '_' + tinfo.expenseTypeName + '_' + billConfig[this.JM]['title'];

                // 影像类型和影像号
                k2Data.barcode = this.data.FImageNo
                k2Data.barcodeType = 1

                let accountBankEntrys = this.data.t.tbank.map(item => {
                    return {
                        PAYEENAME: item.FPAYEENAME,
                        PAYEEBANK: item.FPAYEEBANK,
                        PAYEEACCOUNT: item.FPAYEEACCOUNT,
                        AMOUNT: item.FAMOUNT
                    }
                })

                // 拼接bodysJson
                k2Data.bodysJson = this.caiBaoBodysJson({
                    BudgetInfo: this.data.BudgetInfo,
                    payWay: this.data.payWay,
                    Fnumber: this.billNum,
                    accountBankEntrys: accountBankEntrys,
                    title: k2Data.sProcessSubject,
                    userNum: this.userNum,
                    userName: this.userInfo.userName,
                    cause: tinfo.expenseTypeName,
                    list: this.data.t.tinfo,
                    creatDate: formatDate(new Date(), 'yyyy-MM-dd'),
                    companyName: this.userInfo.companyName,
                    depName: this.userInfo.depName
                })

            } else {
                // 费报
                k2Data.ExpenseType = this.data.entrys[0].expenseTypeNum;
                k2Data.sCapital = this.data.entrys[0].applyAmount;
                k2Data.sProcessSubject = this.userInfo.userNum + '_' + this.data.entrys[0].expenseTypeName + '_' + billConfig[this.JM]['title'];
            }
            sessionStorage.setItem('k2Data', JSON.stringify(k2Data));
            console.log('k2Data>>>', k2Data);
            window.open(this.$store.state.K2Page);
        },
        xinCenBodysJson (data) {
            let {
                title,
                cause,
                billNum,
                userName,
                companyName,
                nowDate,
                timeCope, // 当前时间的后四个月
                entrys
            } = data
            let tabStr = ''

            entrys.forEach(item => {
                tabStr += '<tr><td>' + item.expenseID +
                '</td><td>' + item.uName +
                '</td><td>' + item.startDate +
                '</td><td>' + item.endDate +
                '</td><td>' + item.fro +
                '</td><td>' + item.fto +
                '</td><td>' + item.companyNum +
                '</td><td>' + item.centerNum +
                '</td></tr>'
            })

            let jsonStr = `<style type='text/css'>
                .menuBar { display: inline-block; background: #e6e6e6; } .menuBar ul { list-style: none; } .menuBar li { float: left; width: 100px; margin-left: 3px; line-height: 30px; } .menuBar a { display: block; text-align: center; height: 30px; } .menuBar a:link { color: red; font-weight: bold; text-decoration: none; background: #e6e6e6; } .menuBar a:visited { color: red; font-weight: bold; text-decoration: none; background: #e6e6e6; } .menuBar a:hover { color: green; font-weight: bold; text-decoration: none; background: #e6e6e6; } #base { background-color: #e6e6e6; } .panel { font-size: 12px; text-align: left; margin-top: 7px; } .panel.sheader { padding-top: 5px; } .panel.sheader.titile { color: blue; font-weight: bold; } .panel.content { padding-top: 5px; } .panel.content.block { width: 100%; position: relative; margin-top: 10px; } .panel.content.leftBlock { width: 50%; float: left; vertical-align: top; } .panel.content.rightBlock { width: 49%; float: right; vertical-align: top; } .ui-lablecontainer { padding-bottom: 5px; padding-top: 0px; padding-left: 0px; padding-right: 0px; margin: 0px 10px; } .ui-lablecontainer.label { width: 100px; display: inline-block; vertical-align: middle; } .ui-lablecontainer.value { display: inline-block; vertical-align: middle; overflow: hidden; } div { word-wrap: break-word; word-break: normal; }
                </style>
                <div class='main'> <div class='panel' id='topic'> <div class='sheader'> <span class='titile'><a onclick='showdiv(1)'>+主题</a></span></div> <div class='contents' id='contentPane1' style='color: red; font-size: 16px; font-weight: bold;'> <div class='block'> <div class='ui-lablecontainer' id='topic'> <label class='label'> <span></span> </label> <span class='value'>
                ${title}</span></div> </div> </div> </div> <div class='panel' id='cause'> <div class='sheader'> <span class='titile'><a onclick='showdiv(3)'>+事由</a></span></div> <div class='contents' id='contentPane3' style='color: red; font-size: 16px; font-weight: bold;'> <div class='block'> <div class='ui-lablecontainer' id='cause'> <label class='label'> <span></span> </label> <span class='value'> <table style='width: 650px;'> <tbody> <tr> <td style='color: red; font-size: 16px; font-weight: bold; -ms-word-break: break-all;'>
                ${cause}</td> </tr> </tbody> </table> </span> </div> </div> </div> </div> <div class='panel' id='base'> <div class='sheader'> <span class='titile'><a onclick='showdiv(2)'>+基本信息</a></span></div> <div class='contents' id='contentPane2'> <div class='block'> <div class='leftBlock'> <div class='ui-lablecontainer' id='number'> <label class='label'> <span>单据编号:</span></label><span class='value'>
                ${billNum}</span></div> <div class='ui-lablecontainer' id='applier'> <label class='label'> <span>申请人:</span></label><span class='value'>
                ${userName}</span></div> <div class='ui-lablecontainer' id='applierCompany'> <label class='label'> <span>申请公司:</span></label><span class='value'>
                ${companyName}</span></div> </div> <div class='rightBlock'> <div class='ui-lablecontainer' id='bizReqDate'> <label class='label'> <span>申请日期:</span></label><span class='value'>
                ${nowDate}</span></div> <div class='ui-lablecontainer' id='effecDate'> <label class='label'> <span>有效日期:</span></label><span class='value'>
                ${timeCope}</span></div> </div> </div> </div> </div> <div class='panel' id='entry'> <div class='sheader'> <span class='titile'><a onclick='showdiv(4)'>+行程清单</a></span></div> <div class='contents' id='contentPane4'> <div class='block'> <table width='100%' border='1'> <tbody> <tr> <td> 费用类型 </td> <td> 出差人 </td> <td> 开始日期 </td> <td> 结束日期 </td> <td> 出发地点 </td> <td> 目的地点 </td> <td> 预算（额度）归属公司 </td> <td> 预算（额度）归属部门 </td> </tr>
                ${tabStr}</tbody> </table> </div> </div> </div> <div class='panel' id='billInfo'> <div class='sheader'> <span class='titile'><a onclick='showdiv(5)'>+制单信息</a></span></div> <div class='contents' id='contentPane5'> <div class='block'> <div class='leftBlock'> <div class='ui-lablecontainer' id='biller'> <label class='label'> <span>制单人:</span></label><span class='value'>
                ${userName}</span></div> </div> <div class='rightBlock'> <div class='ui-lablecontainer' id='billDate'> <label class='label'> <span>制单日期:</span></label><span class='value'>
                ${nowDate}</span></div> </div> </div> </div> </div></div>`
            console.log(jsonStr)
            return jsonStr
        },
        caiBaoBodysJson (data) {
            let {
                Fnumber,
                BudgetInfo,
                payWay,
                accountBankEntrys,
                title,
                cause,
                userNum, // 出差人
                userName,
                list,
                creatDate,
                companyName,
                depName
            } = data

            var detailStr = '' // 行程明细
            var allDay = 0 // 总天数
            var allbNum = 0 // 总出差补贴
            var allbWFfee = 0 // 往返总费用
            var allSNfee = 0 // 市内往返总费用
            var allchangtu = 0 // 长途总费用
            var alleveSubsidy = 0 // 住宿总标准
            var allactully = 0 // 总发票合计金额
            var allZSfee = 0 // 总住宿实际报销费用
            var alloNum = 0 // 总其它费用
            var Total = 0 // 总费用

            list.forEach(item => {
                var Trasportation = '机票经济舱或高铁二等座';
                var changtu = Number(item.FBussesExpense);
                allbNum += Number(item.FEVENTIONSUBSIDY) // 总出差补贴
                allbWFfee += Number(item.CFGOBACKFLY) // 往返总费用
                allSNfee += Number(item.TAXIEXPENSE) // 市内往返总费用
                allchangtu += Number(item.BUSSESEXPENSE) // 长途总费用
                // alleveSubsidy += Number(data[j].hotelExpense); // 住宿总标准
                alleveSubsidy = '' // 住宿总标准
                allactully += Number(item.CFINVOICETOTALAMOUNT); // 总发票合计金额
                allZSfee += Number(item.CFREALBAOXIAOAMOUNT); // 总住宿实际报销费用
                alloNum += Number(item.FOTHEREXPENSE); // 总其它费用
                Total += Number(item.FAMOUNT); // 总费用

                detailStr += '<TR>' +
                '<TD>' + item.expenseTypeName + '</TD>' +//费用类型
                '<TD>' + item.FCOMPANYNAME + '</TD>' +//报销公司
                '<TD>' + item.FCOSTCENTERNAME + '</TD>' +//报销部门
                '<TD>' + item.BXUSERNAME + '</TD>' +//出差人
                '<TD>' + item.FSTARTDATE.split(' ')[0] + '</TD>' +//出发日期
                '<TD>' + item.FENDDATE.split(' ')[0] + '</TD>' +//往返日期
                '<TD>' + item.FFROM + '</TD>' +//出发地
                '<TD>' + item.FTO + '</TD>' +//目的地
                //'<TD>'+val.FDAYS+'</TD>'+
                '<TD>' + item.FEVENTIONSUBSIDY + '</TD>' +//出差补贴
                '<TD>' + Trasportation + '</TD>' +//交通工具
                '<TD>' + item.CFGOBACKFLY + '</TD>' +//往返机场金额
                '<TD>' + item.FTAXIEXPENSE + '</TD>' +//市内交通金额
                '<TD>' + item.FBUSSESEXPENSE + '</TD>' +//长途费用
                '<TD>' + item.CFSTAYSTANDARDID + '</TD>' + //住宿标准
                '<TD>' + item.CFINVOICETOTALAMOUNT + '</TD>' + //发票合计金额
                '<TD>' + item.CFREALBAOXIAOAMOUNT + '</TD>' + //实际报销金额
                '<TD>' + item.FOTHEREXPENSE + '</TD>' + //其它费用
                '<TD>' + item.FAMOUNT + '</TD></TR>'; //合计
            })

            // 费用信息
            let allFeeStr = '<TD><SPAN style=\'font-weight: bold;\'>'+ allbNum+'</SPAN></TD>'+
                '<TD></TD>'+
                '<TD><SPAN style=\'font-weight: bold;\'>'+allbWFfee+'</SPAN></TD>'+
                '<TD><SPAN style=\'font-weight: bold;\'>'+allSNfee+'</SPAN></TD>'+
                '<TD><SPAN style=\'font-weight: bold;\'>'+allchangtu+'</SPAN></TD>'+
                '<TD><SPAN style=\'font-weight: bold;\'>'+alleveSubsidy+'</SPAN></TD>'+
                '<TD><SPAN style=\'font-weight: bold;\'>'+allactully+'</SPAN></TD>'+
                '<TD><SPAN style=\'font-weight: bold;\'>'+allZSfee+'</SPAN></TD>'+
                '<TD><SPAN style=\'font-weight: bold;\'>'+alloNum+'</SPAN></TD>'+
                '<TD><SPAN style=\'font-weight: bold;\'>'+Total+'</SPAN></TD></TR>'

            //付款信息；
            let accountBankEntryStr = ''
            accountBankEntrys.forEach(item => {
                accountBankEntryStr += '<TR>'+
                '<TD>' + item.PAYEENAME + '</TD>' +
                '<TD>' + '职员' + '</TD>' +
                '<TD>' + item.PAYEEBANK + '</TD>' +
                '<TD>' + item.PAYEEACCOUNT + '</TD>' +
                '<TD>' + item.AMOUNT + '</TD>' +
                '<TD></TD>' +
                '<TD>未付款</TD></TR>'
            })

            // 预算信息
            let BudgetInfoStr = ''
            BudgetInfo.forEach(item => {
                BudgetInfoStr += '<TR>'+
                '<TD>'+item.applicationPro+'</TD>'+
                '<TD>'+item.group+'</TD>'+
                '<TD>'+item.factor+'</TD>'+
                '<TD>'+item.timeLine+'</TD>'+
                '<TD>'+item.CurrentBudget+'</TD>'+
                '<TD>'+item.actualAmount+'</TD>'+
                '<TD>'+item.availableBudget+'</TD></TR>'
            })

            let SB = '<TABLE width=\'100%\' align=\'center\' class=\'noprint\' id=\'toolbar\' bordercolor=\'#b0b0b0\' '+
                'bgcolor=\'#ffffff\' border=\'1\' cellspacing=\'0\' cellpadding=\'0\'>'+
                '<TABLE align=\'center\' style=\'width: 600px; height: 98%;\' border=\'0\' cellspacing=\'0\' '+
                'cellpadding=\'0\' valign=\'top\'>'+
                '<TBODY>'+
                '<TR>'+
                '<TD height=\'40%\' valign=\'top\'> '+
                '<TABLE width=\'604\' align=\'center\' style=\'margin: 1px; width: 100%; border-collapse: collapse;\' '+
                'border=\'0\' cellspacing=\'0\' cellpadding=\'0\'>'+
                '<TABLE width=\'604\' align=\'center\' bordercolor=\'#000000\' style=\'margin: 1px; border-collapse: collapse;\' '+
                'border=\'1\' cellspacing=\'0\' cellpadding=\'0\'>'+
                '<TBODY>'+
                '<TR>'+
                '<TD id=\'ctl00_PrintHolder_userControl\' colspan=\'4\'> '+
                '<DIV id=\'ctl00_PrintHolder_ctl00_txtEvectionReqFrameContent\' style=\'width: 100%; height: 100%;\'>'+
                '<STYLE type=\'text/css\'>.menuBar{display:inline-block;background:#e6e6e6;}.menuBar ul{list-style:none;}.menuBar li{float:left; width:100px; margin-left:3px; line-height:30px;}.menuBar a  {display:block; text-align:center; height:30px;}.menuBar a:link   {color:red; font-weight:bold; text-decoration:none; background:#e6e6e6;}.menuBar a:visited{color:red; font-weight:bold; text-decoration:none; background:#e6e6e6;}.menuBar a:hover  {color:green; font-weight:bold; text-decoration:none; background:#e6e6e6;}#base {background-color: #e6e6e6;}.panel{font-size:12px;text-align:left;margin-top:7px;}.panel.sheader{padding-top:5px;}.panel.sheader.titile {color:blue;font-weight: bold;}.panel.content {padding-top:5px;}.panel.content.block {width:100%;position:relative;margin-top:10px;}.panel.content.leftBlock {width:50%;float:left;vertical-align:top;}.panel.content.rightBlock {width:49%;float:right;vertical-align:top;}.ui-lablecontainer{padding-bottom:5px;padding-top:0px;padding-left:0px;padding-right:0px;margin:0px 10px;}.ui-lablecontainer.label{width:100px;display:inline-block;vertical-align:middle;}.ui-lablecontainer.value{display:inline-block;vertical-align:middle;overflow:hidden;}div{ word-wrap: break-word; word-break: normal;}</STYLE>'+
                '<DIV class=\'main\'>'+
                '<DIV class=\'menuBar\'>'+
                '</DIV>'+
                '<DIV class=\'panel\' id=\'topic\'>'+
                '<DIV class=\'sheader\'><SPAN class=\'titile\'><A '+
                'onclick=\'showdiv(1)\'>+主题</A></SPAN></DIV>'+
                '<DIV class=\'contents\' id=\'contentPane1\' style=\'color: red; font-size: 16px; font-weight: bold;\'>'+
                '<DIV class=\'block\'>'+
                '<DIV class=\'ui-lablecontainer\' id=\'topic\'><LABEL '+
                'class=\'label\'><SPAN></SPAN></LABEL><SPAN '+
                'class=\'value\'>'+title+'</SPAN></DIV></DIV></DIV></DIV>'+
                '<DIV class=\'panel\' id=\'cause\'>+事由 <DIV class=\'ui-lablecontainer\' id=\'tel\'>'+
                '  <TR>'+
                '<TD style=\'color: red; font-size: 16px; font-weight: bold; -ms-word-break: break-all; \' colspan=4>'+cause+'</TD></TR></TBODY></TABLE></SPAN></DIV></DIV></DIV></DIV>'+
                '<DIV class=\'panel\' id=\'base\'>'+
                '<DIV class=\'sheader\'><SPAN class=\'titile\'><A '+
                'onclick=\'showdiv(2)\'>+基本信息</A></SPAN></DIV>'+
                '<DIV class=\'contents\' id=\'contentPane2\'>'+
                '<DIV class=\'block\'>'+
                '<DIV class=\'leftBlock\'>'+
                '<DIV class=\'ui-lablecontainer\' id=\'number\'><LABEL '+
                'class=\'label\'><SPAN>单据编号:</SPAN></LABEL><SPAN '+
                'class=\'value\'>'+Fnumber+'</SPAN></DIV>'+
                '<DIV class=\'ui-lablecontainer\' id=\'applier\'><LABEL '+
                'class=\'label\'><SPAN>申请人:</SPAN></LABEL><SPAN '+
                'class=\'value\'>'+userName+'</SPAN></DIV>'+
                '<DIV class=\'ui-lablecontainer\' id=\'costedDept\'><LABEL '+
                'class=\'label\'><SPAN>费用支付部门:</SPAN></LABEL><SPAN '+
                'class=\'value\'>'+depName+'</SPAN></DIV>'+
                // '<DIV class=\'ui-lablecontainer\' id=\'postAddress\'><LABEL '+
                // 'class=\'label\'><SPAN>扫描点:</SPAN></LABEL><SPAN '+
                // 'class=\'value\'>'+'佛山地产扫描点'+'</SPAN></DIV></DIV>'+
                '<DIV class=\'rightBlock\'>'+
                '<DIV class=\'ui-lablecontainer\' id=\'bizReqDate\'><LABEL '+
                'class=\'label\'><SPAN>申请日期:</SPAN></LABEL><SPAN '+
                'class=\'value\'>'+creatDate+'</SPAN></DIV>'+
                '<DIV class=\'ui-lablecontainer\' id=\'company\'><LABEL '+
                'class=\'label\'><SPAN>费用支付公司:</SPAN></LABEL><SPAN '+
                'class=\'value\'>'+companyName+'</SPAN></DIV>'+
                '</DIV></DIV></DIV></DIV>'+
                '<DIV class=\'panel\' id=\'entry\'>'+
                '<DIV class=\'sheader\'><SPAN class=\'titile\'><A '+
                'onclick=\'showdiv(4)\'>+行程清单</A></SPAN></DIV>'+
                '<DIV class=\'contents\' id=\'contentPane4\'>'+
                '<DIV class=\'block\'>'+
                '<TABLE width=\'100%\' border=\'1\'>'+
                '<TBODY>'+
                '<TR>'+
                '<TD>费用类型</TD>'+
                '<TD>预算(额度)归属公司</TD>'+
                '<TD>预算(额度)归属部门</TD>'+
                '<TD>出差人</TD>'+
                '<TD>出发日期</TD>'+
                '<TD>往返日期</TD>'+
                '<TD>出发地</TD>'+
                '<TD>目的地</TD>'+
            //  '<TD>天数</TD>'+
                '<TD>出差补贴</TD>'+
                '<TD>交通工具</TD>'+
                '<TD>往返机场交通费</TD>'+
                '<TD>市内交通费</TD>'+
                '<TD>长途费用</TD>'+
                '<TD>住宿标准</TD>'+
                '<TD>发票合计金额</TD>'+
                '<TD>实际报销金额</TD>'+
                '<TD>其他费用</TD>'+
                '<TD>合计金额</TD></TR>'+detailStr +
                '<TD style=\'text-align: center;\'><SPAN style=\'font-weight: bold;\'>合 '+
                '  计:</SPAN></TD>'+
                '<TD></TD>'+
                '<TD></TD>'+
                '<TD></TD>'+
                '<TD></TD>'+
                '<TD></TD>'+
                '<TD></TD>'+
                '<TD></TD>'+
                allFeeStr +
                '</TBODY></TABLE></DIV></DIV></DIV>'+
                '<DIV class=\'panel\' id=\'balance\'>'+
                '<DIV class=\'sheader\'><SPAN class=\'titile\'><A '+
                'onclick=\'showdiv(5)\'>+财务信息</A></SPAN></DIV>'+
                '<DIV class=\'contents\' id=\'contentPane5\'>'+
                '<DIV class=\'block\'>'+
                '</DIV></DIV></DIV>'+
                '<DIV class=\'panel\' id=\'BankEntries\'>'+
                '<DIV class=\'sheader\'><SPAN class=\'titile\'><A '+
                'onclick=\'showdiv(6)\'>+付款信息</A></SPAN></DIV>'+
                '<DIV class=\'contents\' id=\'contentPane6\'>'+
                '<DIV class=\'block\'>'+
                '<TABLE width=\'100%\' border=\'1\'>'+
                '<TBODY>'+
                '<TR>'+
                '<TD>收款人名称</TD>'+
                '<TD>收款人类型</TD>'+
                '<TD>收款银行</TD>'+
                '<TD>收款账号</TD>'+
                '<TD>金额</TD>'+
                '<TD>供应商核准状态</TD>'+
                '<TD>付款状态</TD></TR>'+accountBankEntryStr+
                '</TBODY></TABLE></DIV></DIV></DIV>'+
                '<DIV class=\'panel\' id=\'payInfo\'>'+
                '<DIV class=\'sheader\'><SPAN class=\'titile\'><A '+
                'onclick=\'showdiv(8)\'>+付款方式</A></SPAN></DIV>'+
                '<DIV class=\'contents\' id=\'contentPane8\'>'+
                '<DIV class=\'block\'>'+
                '<DIV class=\'ui-lablecontainer\' id=\'payMode\' style=\'width: 30%; display: inline;\'><LABEL '+
                'class=\'label\' style=\'width: 60px;\'><SPAN>结算方式:</SPAN></LABEL><SPAN '+
                'class=\'value\'>'+payWay.method+'</SPAN></DIV>'+
                '<DIV class=\'ui-lablecontainer\' id=\'payAccount\' style=\'width: 30%; display: inline;\'><LABEL '+
                'class=\'label\' style=\'width: 60px;\'><SPAN>付款账号:</SPAN></LABEL><SPAN '+
                'class=\'value\'>'+payWay.payMent+'</SPAN></DIV>'+
                '<DIV class=\'ui-lablecontainer\' id=\'payBank\' style=\'width: 30%; display: inline;\'><LABEL '+
                'class=\'label\' style=\'width: 60px;\'><SPAN>付款银行:</SPAN></LABEL><SPAN '+
                'class=\'value\'>'+payWay.payMentBank+'</SPAN></DIV></DIV></DIV></DIV>'+
                '<DIV class=\'panel\' id=\'budget\'>'+
                '<DIV class=\'sheader\'><SPAN class=\'titile\'><A '+
                'onclick=\'showdiv(0)\'>预算信息</A></SPAN></DIV>'+
                '<DIV class=\'content\' id=\'contentPane0\'>'+
                '<DIV class=\'block\'>'+
                '<TABLE width=\'100%\' border=\'1\'>'+
                '<TBODY>'+
                '<TR>'+
                '<TD>预算申请项目</TD>'+
                '<TD>组织</TD>'+
                '<TD>预算要素</TD>'+
                '<TD>预算期间</TD>'+
                '<TD>本期预算额</TD>'+
                '<TD>实际发生额</TD>'+
                '<TD>可用预算</TD></TR>'+BudgetInfoStr+
                '</TBODY></TABLE></DIV></DIV></DIV>'+
                '<DIV class=\'panel\' id=\'billInfo\'>'+
                '<DIV class=\'sheader\'><SPAN class=\'titile\'><A '+
                'onclick=\'showdiv(7)\'>+制单信息</A></SPAN></DIV>'+
                '<DIV class=\'contents\' id=\'contentPane7\'>'+
                '<DIV class=\'block\'>'+
                '<DIV class=\'leftBlock\'>'+
                '<DIV class=\'ui-lablecontainer\' id=\'biller\'><LABEL '+
                'class=\'label\'><SPAN>制单人:</SPAN></LABEL><SPAN '+
                'class=\'value\'>'+userNum+'</SPAN></DIV></DIV>'+
                '<DIV class=\'rightBlock\'>'+
                '<DIV class=\'ui-lablecontainer\' id=\'billDate\'><LABEL '+
                'class=\'label\'><SPAN>制单日期:</SPAN></LABEL><SPAN '+
                'class=\'value\'>'+creatDate+'</SPAN></DIV></DIV></DIV></DIV></DIV></DIV>'+
                '</DIV></TD></TR>'+
                '</TBODY></TABLE>'
                return SB
        }
    }
};
</script>

<style lang="less" scoped>
.btn-list{
    height:.8rem;
}
.btn-item{
    // display:inline-block;
    height:.8rem;
    width:1.8rem;
    line-height: .8rem;
    text-align: center;
    color:#FFF;
    background-color:#38acff;
    margin:0;
    &.del, &.trash{
        background-color:#FF4040;
    }
    &.modify{
        background-color:#FFC125;
    }
}
</style>
